<template>
  <div class="RecommendList">
    <div class="big-title">您可能还喜欢</div>
    <div class="product-list">
      <ProductCard
        v-for="(item, index) in productList"
        :key="index"
        :img="item.imageList?.[0]"
        :title="item.name"
        :price="item.price"
        :id="item.id"
        :width="computedProductWidth()"></ProductCard>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import ProductCard from "@/components/ProductCard/index";
import { listRandomProductList } from '@/api'

defineProps({
  listApi: {
    type: String,
    default: "",
  },
  height: {
    type: Number,
    default: 0,
  },
});

const done = ref(false);
const productList = ref([]);

const computedProductWidth = () => uni.upx2px(328)

const getList = async () => {
  const res = await listRandomProductList({ pageSize: 20 })
  productList.value = res.records || []
}

onMounted(() => {
  getList()
});
</script>

<style lang="scss" scoped>
.RecommendList {
  .big-title {
    font-size: 16px;
    color: #000000;
    line-height: 23px;
    padding: 16px 0 16px 0;
    text-align: center;
  }
  .product-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: calc(100vw - 360px);
      padding: 0 16px 16px 16px;
    }
}
</style>
